<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/comm/comm.jsp"%>


<div class="content-bottom">
	<div class="row-fluid">
		<div class="span12">
			<div class="portlet box light-grey red">
				<div class="portlet-title">
					<div class="caption">
						<i class="icon-th-list ico-white"></i>后台菜单管理
					</div>
				</div>
				<div class="portlet-body">
					<div class="clearfix">
						<div class="row-fluid">
							<div class="span6">
								<button type="button" class="btn green" onclick='document.getElementById("editForm").reset(); initLayerDiv("添加菜单", $("#editFormDiv"));'>添加菜单</button>
							</div>
						</div>
					</div>
					<div class="portlet-body">
						<table class="table table-bordered table-hover">
							<thead>
								<tr>
									<th>菜单</th>
									<th>上级菜单</th>
									<th>连接地址</th>
									<th>排序</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${page.results }" var="item">
									<tr>
										<td>${item.menuName }</td>
										<td>${!empty item.menu?item.menu.menuName:'' }</td>
										<td>${item.menuUrl }</td>
										<td>${item.sort }</td>
										<td class="audit_button">
											<a href="javascript:;" class="audit_bj" onclick="display('${item.menuId}')">编辑</a>
											<a href="javascript:;" class="audit_bj" onclick="invalid('${item.menuId}')">删除</a>
										</td>
									</tr>
								</c:forEach>						
							</tbody>
						</table>
					</div>
					
					<div class="row-fluid">
						<div class="span12">
							<%@ include file="/WEB-INF/pages/comm/page.jsp" %>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="editFormDiv" style="display: none;">
	<form id="editForm" class="form-horizontal">
		<input type="hidden" name="menuId">
		<div class="control-group">
			<label class="control-label">上级菜单</label>
			<div class="controls">
				<select name="parentId" class="span6 m-wrap popovers" data-trigger="hover">
					<option value=""></option>
					<c:forEach items="${menus }" var="item">
						<option value="${item.menuId }">${item.menuName }</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">菜单名称</label>
			<div class="controls">
				<input name="menuName" class="span6 m-wrap popovers" data-trigger="hover"
					data-content="标题不能为空" data-original-title="请填写标题" type="text">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">连接地址</label>
			<div class="controls">
				<input name="menuUrl" class="span6 m-wrap popovers" data-trigger="hover"
					data-content="标题不能为空" data-original-title="请填写标题" type="text">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">排列序号</label>
			<div class="controls">
				<input name="sort" class="span6 m-wrap popovers" data-trigger="hover" type="number">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">图标</label>
			<div class="controls">
				<input name="menuIco" class="span6 m-wrap popovers" data-trigger="hover" type="text">
			</div>
		</div>
	</form>
</div>
<input type="hidden" name="pageNo" value="${page.pageNo }">

<script type="text/javascript">
	function initLayerDiv(title, contentDiv, size) {
		layer.open({
			title : title,
			type : 1,
			skin : 'layui-layer-rim', //加上边框
			area : size ? size : [ '735px', '450px' ], //宽高
			content : contentDiv,
			btns: 2,
			btn: ['确定', '取消'],
			no: function(index){ layer.close(index); },
			yes: function(index) {
				$.ajax({
					url: '${ctx}/menu/modifyOrAdd',
					data: $('#editForm').serialize(),
					success: function(data) {
						layer.msg(data.msg, function() {
							layer.close(index);
							location.reload();
						});
					}
				});
			}
		});
	}

	function queryResult() {
		$.ajax({
			url: '${ctx }/menu/queryPage',
	        data: { pageNo: $('[name="pageNo"]').val() },
	        dataType: 'html',
	        success: function (data) {
		        $("#main").html(data);
	        }
		});
	}
	
	function display(menuId) {
		$.ajax({
			url: '${ctx}/menu/getJson',
			data: { id: menuId },
			success: function(data) {
				$('#editForm').formInitData(data.record);
				initLayerDiv('更新菜单', $('#editFormDiv'));
			}
		});
	}

	function invalid(menuId) {
		layer.confirm('确定要删除该记录？', {
			btn: ['确定','取消']
		}, function() {
			$.ajax({
				url: '${ctx}/menu/modifyOrAdd',
				data: { menuId: menuId, status: 1 },
				success: function(data) {
					location.reload();
				}
			});
		});
	
	}

	


	$(function() {

	});
</script>
